<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
	<head>
		<title>Calendar-日历控件</title>
		<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
		<link rel="stylesheet" href="../../assets/css/reset.css"/>
	    <link rel="stylesheet" href="../../assets/css/example.css"/>
	    <link rel="stylesheet" href="calendar.css"/>
	    <script src="../../jquery/jquery-1.7.1.min.js"></script>
		<script src="calendar.js"></script>
	</head>
<body>
    <h1>Calendar</h1>
	<hr size="1" />
	<h3>静态日历，默认选中日期，以及点击回调事件</h3>
	<div class="wrap">
		<div id="calendar-1"></div>
	</div>

    <hr size="1" />
	<h3>静态日历，默认显示月份</h3>
	<div id="calendar-2"></div>	

	<hr size="1" />
	<h3>弹出日历，以及点击回调事件</h3>
	<input id="popup-1" type="text" />

	<hr size="1" />
	<h3>年月切换</h3>
	月份触发onMonthChange事件，年份切换触发触发onYearChange事件
	<div id="calendar-4"></div>

	<hr size="1" />
	<h3>自定义日期格式</h3>
	<input id="popup-2" type="text" />

	<hr size="1" />
	<h3>可选日期范围</h3>
	minDate设置最小日期、maxDate设置最大日期，disabledDays设置星期几不可选的，disabledDates设置不可选的日期
	<div id="calendar-5"></div>

	<hr size="1" />
	<h3>设置星期显示顺序</h3>
	<div id="calendar-6"></div>

	<script>
		var today = new Date();
		var showdate = function(n, d) {
            var uom = new Date(d - 0 + n * 86400000);
            uom = uom.getFullYear() + "/" + (uom.getMonth() + 1) + "/" + uom.getDate();
            return new Date(uom);
        }
		//静态日历，默认选中日期，以及点击回调事件
		new CNC.ui.Calendar("calendar-1", {
			selected: showdate(-3, today),
			popup:false,
			onPicked: function(d){
				alert(d);
			}		
		})

		//静态日历，默认显示月份
		new CNC.ui.Calendar("calendar-2", {
			date: new Date("2011/02/01"),
			selected: showdate(5, new Date("2011/02/01")),
			popup:false,
			onPicked: function(d){
				alert(d);
			}		
		})
		//弹出
		new CNC.ui.Calendar("popup-1", {
			//closable: false,
			onPicked: function(d){
				alert(d)
			}
		});

		//年月切换
		new CNC.ui.Calendar("calendar-4", {
			popup:false,
			onMonthChange: function(m){
				alert("切换至 " + m + " 月")
			},
			onYearChange: function(y){
				alert("切换至 " + y + " 年")
			}
		})

		//可选范围设置
		new CNC.ui.Calendar("calendar-5", {
			date: new Date("2011/7/01"),
			disabledDays: [0, 6] ,
			disabledDates: [new Date("2011/7/14"), new Date("2011/7/20")], //['2011-08-04']
			minDate: new Date("2011/7/07"),      
			maxDate: new Date("2011/7/23"),
			popup:false	
		})

		//日期格式
		new CNC.ui.Calendar("popup-2", {				
			format: "yyyy/mm/dd"
		});

		//设置星期显示顺序
		new CNC.ui.Calendar("calendar-6", {
			startDay: 2,
			popup:false	
		})
	</script>
</body>
</html>